<main>
  <mat-card>
    <form [formGroup]="runForm" (ngSubmit)="run(runForm.value)">
      <mat-grid-list cols="2" rowHeight="1.5:1">
        <mat-grid-tile>
          <div id="test-runner">
            <h1>Run Tests</h1>
            <mat-form-field appearance="fill">
              <mat-label>Prompts</mat-label>
              <mat-select formControlName="prompts">
                <mat-option *ngFor="let prompt of promptsList | keyvalue" [value]="prompt.key">{{prompt.key}}</mat-option>
              </mat-select>
              <mat-error *ngIf="prompts.hasError('required')">Prompts are required</mat-error>
            </mat-form-field>
            <mat-form-field appearance="fill">
              <mat-label>Target</mat-label>
              <mat-select formControlName="target">
                <mat-option *ngFor="let target of targetList | keyvalue" [value]="target.key">{{target.key}}</mat-option>
              </mat-select>
              <mat-error *ngIf="target.hasError('required')">Target is required</mat-error>
            </mat-form-field>
            <mat-form-field>
              <mat-label>Test Order</mat-label>
              <mat-chip-list #testChipList cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropTestChip($event)">
                <mat-chip *ngFor="let name of testNames; let pos = index" selectable="true" removeable="true" cdkDrag (removed)="removeTest(pos)">
                  {{name}}
                  <mat-icon matChipRemove>cancel</mat-icon>
                </mat-chip>
                <input placeholder="Test Name..." #testNameInput [matAutocomplete]="testNameComplete" [matChipInputFor]="testChipList">
              </mat-chip-list>
              <mat-autocomplete #testNameComplete='matAutocomplete' (optionSelected)="selectedTest($event)">
                <mat-option *ngFor="let test of allTestNames" [value]="test">{{test}}</mat-option>
              </mat-autocomplete>
            </mat-form-field>
            <button type="submit" [disabled]="!runForm.valid" mat-raised-button color="primary"><mat-icon>play_arrow</mat-icon> Run</button>
          </div>
        </mat-grid-tile>
        <mat-grid-tile>
          <section #terminal [innerHTML]="stdout | safe"></section>
        </mat-grid-tile>
      </mat-grid-list>
    </form>
  </mat-card>
</main>
